<template>
  <div class="frame">
    <router-view class="main"/>
    <div class="fixed-wrap"></div>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/center/home" name="Home">首页</van-tabbar-item>
      <van-tabbar-item icon="search" to="/center/video" name="Video">视频</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/center/people" name="People">掌上民生</van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/center/service" name="Service">服务</van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/center/mine" name="Mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'Center',
  mounted () {
    const active = this.$route.name
    this.active = active || 'Home'
  },
  data () {
    return {
      active: 'Home'
    }
  }
}
</script>

<style lang="scss" scoped>
.frame{
  .main{
    margin-bottom: 52px;
  }
}
</style>
